<template>
  <div class="question-list">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-wrapper">
      <el-skeleton :rows="3" animated />
    </div>

    <!-- 问题列表 -->
    <div v-else>
      <div v-if="questions.length > 0">
        <div v-for="question in questions" 
             :key="question.id" 
             class="question-item"
             @click="goToDetail(question)">
          <h3 class="question-title">{{ question.name }}</h3>
          <p v-if="question.summary" class="question-summary">{{ question.summary }}</p>
          <div class="question-meta">
            <span class="time">{{ formatTime(question.createdAt) }}</span>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <el-empty v-else description="暂无问题" />
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

// 定义props
const props = defineProps({
  questions: {
    type: Array,
    required: true
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()

// 格式化时间
const formatTime = (time) => {
  return dayjs(time).fromNow()
}

// 跳转到详情页
const goToDetail = (question) => {
  router.push({
    name: 'question',
    params: { id: question.id }
  })
}
</script>

<style scoped lang="scss">
.question-list {
  .loading-wrapper {
    padding: 20px;
  }

  .question-item {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f9f9f9;
    }

    .question-title {
      margin: 0 0 10px;
      font-size: 18px;
      font-weight: 600;
      color: #121212;
    }

    .question-summary {
      margin: 0 0 10px;
      font-size: 14px;
      color: #646464;
      line-height: 1.6;
    }

    .question-meta {
      font-size: 12px;
      color: #8590a6;

      .time {
        margin-right: 15px;
      }
    }
  }
}
</style> 